<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Login</title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link href="../test/css/styles.css" rel="stylesheet" type="text/css"></link>
        <link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'></link>

        <script>
            function change()
            {
                var a = parseInt(document.getElementById('index').value);
                a = a + 1;
                if (a > 72)
                {
                    a = 1;
                }
                var link = "images/rotation/Picture" + a + ".png";
                document.getElementById('picture').src = link;
                document.getElementById('index').value = a;
            }
            $(document).ready(function(e) {
                setInterval(function() {
                    change();
                }, 500);
            });
        </script>

        <!--<script>
        
        $(document).ready(function(e) {
                $('#login').width($('body').width()*0.2);
                $('#login').css('margin-left', $('body').width()*0.4);
                $('body').height($('#login').height()*10/4);
                $('#login').css('margin-top', ($('body').height()*0.5));
                $('#user_icon').height($('#user_text').height());
                $('#password_icon').height($('#password_text').height()+2);
        });
        </script>-->

    </head>
    <body>
        <!--
          Below we include the Login Button social plugin. This button uses the JavaScript SDK to
          present a graphical Login button that triggers the FB.login() function when clicked. -->
        <div id="banner">
            <img style="margin-left: 10%" src="../test/images/banner.png" />
        </div>
        <div class="nav"></div>
        <div id="content">
            <div class="column">
                <div id="login">
                    <div id="form">
                        <form id="loginform" action="/~Cerberus/login/" method="POST">
                            <p>
                                <label class="text">User name</label>
                            </p>
                            <p>
                                <input value="n22le" name="user" id="user_text" type="text" class="textbox" align="middle"/>
                            </p>
                            <p>
                                <label class="text">Password</label>
                            </p>
                            <p>
                                <input name="password" value="123456" id="password_text" type="password" class="textbox" align="middle"/>
                            </p>
                            <p>
                                <input name="remember" type="checkbox" id="remember" /> 
                                <label>Stay signed in</label>
                            </p>
                            <p class="divider"></p>
                            <p>
                                <input type="submit" id="login_button" value="Login" />
                            </p>
                        </form>
                        <p>
                            <button id="facebook_login_button" onclick="connectFB()">Login with Facebook</button>    
                        </p>  
                    </div>
                </div>
            </div>
            <div class="column">
                <input type="hidden" id="index" value="1" />
                <img id="picture" src="../test/images/rotation/Picture1.png" />
            </div>
        </div>
        <div class="nav"></div>
    </body>
</html>
